<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <script src="{% static 'jQuery-3.5.1.js' %}"></script>
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
    <script src="/static/js/csrf.js"></script>

    <style>

    </style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div><img src="/static/img/bj_01.jpg" height="400" alt="" class="img-thumbnail"></div>
            <div>
                用户名： <input type="text" id="user_id" class="form-control">
            </div>
            <div>
                绑定邮箱：<input type="email" id="email_id" class="form-control">
            </div>
            <div>
                验证码：<input type="text" id="code_id" class="form-control">
            </div>
            <br>
            <div>
                <button id="send_code_btn" class="btn btn-primary btn-block">点击获取验证码</button>
            </div>
            <br>
            <div>
                <button id="submit_btn" class="btn btn-success btn-block">确认提交</button>
            </div>
            <div id="div_for_a"><a href="#" data-toggle="" data-target="" class="" id="set_btn_id" ></a></div>

        </div>
    </div>
</div>
{#修改密码模态框开始#}
<!--模态框生效的关键： data-toggle="modal" data-target=".bs-example-modal-lg" id ='Mymodel' -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     id="myModel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-2">
                        <h2 class="text-center">修改密码</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-md-offset-2">
                        <div class="form-group">
                            <label for="set_user">用户名</label>
                            <input type="text"  id="set_user"
                                   class="form-control">

                        </div>
                        <div class="form-group">
                            <label for="id_new_pwd">新密码</label>
                            <input type="password" id="id_new_pwd" class="form-control">

                        </div>
                        <div class="form-group">
                            <label for="id_confirm_pwd">确认密码</label>
                            <input type="password" id="id_confirm_pwd" class="form-control">

                        </div>
                        <p><span style="color: red" id="error"></span></p>
                        <button class="btn btn-success btn-sm" id="id_editer">确定修改</button>
                        <button type="button" class="btn btn-primary btn-sm"
                                data-dismiss="modal">取消修改
                        </button>
                        <br>
                        <br>


                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
{#修改密码模态框结束#}

<script>
    //当用户点击获取验证码的时候就触发ajax，让后端向该用户发送邮件携带验证码
    $('#send_code_btn').click(function () {
        let username = $('#user_id').val()
        let email = $('#email_id').val()
        $.ajax({
            url: '',
            type: 'post',
            data: {'op': 'yes', 'username': username, 'email': email},
            success: function (attr) {
                if (attr.code === 200) {
                    alert('验证码已发送，请查收！！')
                } else {
                    alert('用户名或邮箱有误！！')
                }

            }
        })

    })

    //点击提交的时候，将用户数据传递到后端
    $('#submit_btn').click(function () {
        let username = $('#user_id').val()
        let email = $('#email_id').val()
        let code = $('#code_id').val()
        $.ajax({
            url: '',
            type: 'post',
            data: {'username': username, 'email': email, 'code': code, 'submit': ''},
            success: function (attr) {
               if(attr.code===200){
                   $('#div_for_a a').text('点击修改密码')
                   //给用户修改密码标签设置上模态框属性
                   $('#div_for_a a').attr(attr.key1,attr.val1)
                   $('#div_for_a a').attr(attr.key2,attr.val2)
                   $('#div_for_a a').attr('class',attr.class)

               }

            }
        })

    });

    //给点击修改密码设置点击事件
    $('#id_editer').click(function () {
        let username = $('#set_user').val()
        let new_pwd = $('#id_new_pwd').val()
        let config_pwd = $('#id_confirm_pwd').val()
        $.ajax({
            url:'',
            type:'post',
            data:{'username':username,'new_pwd':new_pwd,'config_pwd':config_pwd,'reset':''},
            success:function (attr) {
                if (attr.code===200){
                    alert('密码修改成功')
                    window.location.reload()
                    parent.location.href='/app01/login/'
                }else {
                    alert(attr.msg)
                }
            }
        })

    })

</script>
</body>
</html>